﻿
/* ---- New revamp styles --- */
#mainBannerBox #leftColumn{
	float: left;
	width: 620px;
	margin-bottom:5px;
}
#mainBannerBox #rightColumn{
	float: right;
	width: 240px;
}
#mainBannerBox #leftColumn #itemsPanel {
	padding: 0px 0 10px 0;
}
#carousel_inner {
	position: relative;
	float:left; /* important for inline positioning */
	width:528px; /* important (this width = width of list item(including margin) * items shown */
	overflow: hidden;  /* important (hide the items outside the div) */
	/* non-important styling bellow */
}
#carousel_ul {
	position:relative;
	left:-183px; /* important (this should be negative number of list items width(including margin) */
	list-style-type: none; /* removing the default styling for unordered list items */
	margin:0px 0 5px 0;
	padding: 0px;
	width:9999px; /* important */
	/* non-important styling bellow */
	padding-bottom:10px;
}
#carousel_ul li{
	position: relative;
	float: left; /* important for inline positioning of the list items */
	width:162px;  /* fixed width, important */
	/* just styling bellow*/
	height:220px;
	margin-right: 1px;
	padding: 0 9px;
	background-color: #FFFFCC;/*màu backgroup hình*/
}
#carousel_ul li h5{
	margin: 1px 0 1px 0;
	font-size: 13px;
}
#carousel_ul li p{
	margin: 0;
	color: #999;
	line-height: 15px;
	font-size: 12px;
}
#carousel_ul li .button{
	position: absolute;
	bottom: 8px;
}
#carousel_ul li img {
	.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
	/* styling */
	cursor:pointer;
	cursor: hand;
	border:0px;
	margin-top: 7px;
}
#carousel_ul li	.itemHdr {
	display: block;
	font-size: 16px;
	font-weight: bold;
	padding: 6px 0 0 0px;
}
#carousel_ul li.diningHdr{
	border-bottom: 1px solid #d71a21;
}
#carousel_ul li.diningHdr .itemHdr{
	color: #d71a21;
}
#carousel_ul li.shoppingHdr{
	border-bottom: 1px solid #e80d66;
}
#carousel_ul li.shoppingHdr .itemHdr{
	color: #e80d66;
}
#carousel_ul li.nightlifeHdr{
	border-bottom: 1px solid #f15a22;
}
#carousel_ul li.nightlifeHdr .itemHdr{
	color: #f15a22;
}
#carousel_ul li.attractionsHdr{
	border-bottom: 3px solid #0000CC;
}
#carousel_ul li.attractionsHdr .itemHdr{
	color: #0195dd;
}
#carousel_ul li.eventsHdr{
	border-bottom: 1px solid #573284;
}
#carousel_ul li.eventsHdr .itemHdr{
	color: #573284;
}
#mainBannerBox #leftColumn #itemsPanel .carouselBtn{
	float: left;
	width: 15px;
	height: 220px;
}
#left_scroll img, #right_scroll img{
	/*styling*/
	cursor: pointer;
	cursor: hand;
}
#left_scroll{
	padding-right: 1px;
}
#right_scroll{
	padding-left: 1px;
}
#left_scroll a{
	display: block;
	width: 15px;
	height: 221px;
	background:url(/Tourist/images/icon/left.png) no-repeat left top;
}
#right_scroll a{
	display: block;
	width: 15px;
	height: 221px;
	background:url(/Tourist/images/icon/right.png) no-repeat left top;
}
#left_scroll a:hover,
#right_scroll a:hover{
	background-position:0 -224px;
}